<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
	
	<ui:define name="head">
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	</ui:define>
	
	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">GMap - Dialog</h1>
		<div class="entry">
			<p>This sample demonstrates using map inside a dialog.</p>
			
			<p:commandButton id="btn" type="button" icon="ui-icon-pin-s" value="Show Map" onclick="PF('dlg').show()" />
			
			<p:dialog id="gmapDialog" widgetVar="dlg" width="625" height="400" modal="true">
       			<p:gmap id="gmap" center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:600px;height:400px" />
       		</p:dialog>
			
			<h3>Source</h3>
            <p:tabView>
                <p:tab title="gmapDialog.xhtml">
                    <pre name="code" class="xml">
&lt;p:commandButton type="button" icon="ui-icon-pin-s"
        value="Show Map" onclick="PF('dlg').show()" /&gt;

&lt;p:dialog widgetVar="dlg" width="625" height="400" modal="true"&gt;
    &lt;p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID"
        style="width:600px;height:400px" /&gt;
&lt;/p:dialog&gt;
			</pre>
                </p:tab>
            </p:tabView>
			
												
		</div>
	</ui:define>
</ui:composition>